<template>
  <div class="search-header">
    <!-- 返回按钮 -->
    <div class="back-btn" @click="handleBack">
      <i class="iconfont icon-back"></i>
    </div>
    <!-- 搜索框 -->
    <div class="search-bar">
      <i class="iconfont icon-search"></i>
      <input type="text" placeholder="输入关键字进行搜索（{{ placeholder }}）" v-model="searchKey" @keyup.enter="handleSearch">
    </div>
    <!-- 标签切换 -->
    <div class="search-tabs">
      <div class="tab-item" :class="{ active: activeTab === 'video' }" @click="switchTab('video')">
        视频
      </div>
      <div class="tab-item" :class="{ active: activeTab === 'user' }" @click="switchTab('user')">
        用户
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

// 接收父组件的配置：默认激活标签、搜索提示
const props = defineProps({
  defaultTab: { type: String, default: 'video' }, // 默认激活的标签：video/user
  placeholder: { type: String, default: '视频描述' } // 搜索框提示文字
});

// 对外暴露事件：返回、搜索、标签切换
const emit = defineEmits(['back', 'search', 'tab-change']);

const activeTab = ref(props.defaultTab);
const searchKey = ref('');

// 返回操作
function handleBack() {
  emit('back');
}

// 搜索操作
function handleSearch() {
  emit('search', { key: searchKey.value, tab: activeTab.value });
}

// 标签切换
function switchTab(tab) {
  activeTab.value = tab;
  emit('tab-change', tab);
}
</script>